<template>
    <div>
    <el-container>
        <el-aside width="180px" style="overflow: hidden;">
            <!-- <el-row class="tac">
                <el-col>
                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>考务管理</span>
                            </template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                            <el-menu-item index="1-3">选项3</el-menu-item>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row> -->
            <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <el-button style="float: left;margin-top: 10px" @click="isCollapse=!isCollapse">展开</el-button>
                用户信息管理</el-header>
            <el-main>
                <el-row>
                    <el-col :span="20" :push='2'>
                        <div>
                            <el-form :inline="true">
                                <el-form-item style="float: left" label="查询用户信息:">
                                    <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
                                </el-form-item>
                                <el-form-item style="float: right">
                                    <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="table">
                            <el-table :data="searchUserinfo(keyUser)" border style="width: 100%">
                                <el-table-column type="index" label="序号" align="center" width="60">
                                </el-table-column>
                                <el-table-column label="日期" align="center" width="120">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.date | moment}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="姓名" align="center" width="100">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.name }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="邮箱" align="center" width="160">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.email }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="标题" align="center" width="160">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.title }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="评价" align="center" width="200">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.evaluate }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态" align="center" width="160">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.state }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="160">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
                <AddUser :dialogAdd="dialogAdd" :infodata="tableData" @update="getUserInfo"></AddUser>
                <EditUser :dialogEdit="dialogEdit" :infodata="tableData" :index="index" :form="form" @updateEdit="getUserInfo"></EditUser>
            </el-main>
        </el-container>
    </el-container>
</div>
</template>
<script>


    import AddUser from "./AddUser.vue";
    import EditUser from "./EditUser.vue";
    const infodata=[
    {
        date: '2016-05-02',
        name:'张三',
        email:'123@qq.com',
        title:"我的VUE",
        evaluate:"很好的框架",
        state:"在"
      }, {
        date: '2016-05-04',
        name: '王小虎',
        email:'123@qq.com',
        title:"我的VUE",
        evaluate:"很好的框架",
        state:"在"
      }, {
        date: '2016-05-01',
        name: '王小虎',
        email:'123@qq.com',
        title:"我的VUE",
        evaluate:"很好的框架",
        state:"在"
      }
    ];

   export default {
  name: 'UserInfo',
  data () {
    return {
      tableData:[],
      dialogEdit:{
        show:false,
      },
      dialogAdd:{
        show:false
      },
      keyUser:"",
      form:{    //编辑信息
        date:'',
        name:'',
        email:'',
        title:'',
        evaluate:'',
        state:''
      },
      index:'',
      num:0,
      isCollapse:false
    }
  },
  methods:{
    getUserInfo() {
        this.tableData = infodata
        
    },
     handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    hanldeAdd(){  //添加
        this.dialogAdd.show = true;
    },
    handleEdit(index,row){  //编辑
        this.dialogEdit.show = true; //显示弹
        this.form = {
            date:row.date,
            name:row.name,
            email:row.email,
            title:row.title,
            evaluate:row.evaluate,
            state:row.state,
            id:row.id
        }
        this.index=index;
      console.log(this.form)
    }, 
    handleDelete(index,row) {
        // 删除用户信
        console.log(index,row);
        infodata.splice(index,1);
        this.getUserInfo() 
            this.$message({
                type:"success",
                message:"删除信息成功"
            })
               //删除数据，更新视图
    },
    searchUserinfo(keyUser) {
        return this.tableData.filter((user) => {
            if(user.name.includes(keyUser)) {
                return user
            }
        })
    }
  },
  created(){
    this.getUserInfo();
    var width=document.body.clientWidth;
    console.log(width);
   
  },
  components:{
    AddUser,
    EditUser
  }
}
</script>

<style scoped>
    .el-container{
    height: 100%;
    }
    .el-container .el-container {
        margin-left: 180px;
        height: 100%;
    }

    .el-header {
        background-color: rgb(41, 42, 43);
        color: #fff;
        font-size: 1.25rem /* 20/16 */;
        font-weight: bold;
        text-align: center;
        line-height: 60px;
    }
    .el-row .el-header {
        background-color: rgb(43, 54, 65);
        font-size: 1rem /* 16/16 */;
        height: 100%;
    }

    .el-aside {
        background-color: #545c64;
        color: rgb(37, 36, 36);
        height: 100%;
        position: fixed;
        /* text-align: center; */
        /* line-height: 200px; */
    }

    .el-main {
        background-color: #e9eef3;
        color: #333;

        /* text-align: center; */
        /* line-height: 160px; */
    }

    .el-submenu .el-menu-item {
        min-width: 0;
        text-align: center;
        /* background-color: rgb(43, 54, 65); */
    }
</style>


